<template>
  <div class="sport-container">
    <div class="sport">
      <img src="@/assets/userImg.jpg" alt="">
      <div class="sportContent">
        <h3>放松腿部8分钟</h3>
        <p>
          <span>K1 zero basis</span>
          <span> 999 <van-icon name="like-o" color="red" /> </span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang='less' scoped>
  .sport-container {
    width: 80%;
    background-color: #fff;
    border-radius: .5556rem;
    padding: .8333rem .8333rem;
    margin: 1.1111rem 0 1.1111rem 2.2222rem;
    .sport {
      display: flex;
      justify-content: flex-start;
      img {
        width: 3.3333rem;
        height: 4.4444rem;
        border-radius: .5556rem;
        margin-right: 1.1111rem;
      }
      .sportContent {
        flex-grow:1; // 让他宽度铺满剩余空间
        h3 {
          margin-bottom: 1.6667rem;
        }
        p {
          display: flex;
          justify-content: space-between;
          align-items: center;
          span {
            font-size: .7778rem;
          }
        }
      }
    }
  }
</style>
